import React, { Component } from 'react'
import Nav from '../nav/nav';
import styles from './goodDetail.module.scss';
import { getItemDetail } from '../../data/api';
import { withRouter } from 'react-router-dom';
//引入轮播图组件
import { Carousel, Toast } from 'antd-mobile';

class GoodDetail extends Component {
    state = {
        goodsDetail: {},
        swiperList: [],//保存轮播图的图片
        // str: "", //图文详情的代码结构字符串
        isSave:false,//标志变量，是否收藏
        swiperFlag:false,

    }
    handleCollect = (goods_id) => {
    // 处理收藏的逻辑的
    // 1. good 信息存在本地缓存中
    // 2. 点击收藏按钮 先去本地缓存查看这个商品有没有被收藏
    // 3. 如果已经被收藏，取消收藏，把商品从本地缓存中移除；没有被收藏，收藏，同时把商品存在本地缓存中
    // 其它：页面首次进来 本地缓存检查是否被收藏 is_collect = true
    let collections = JSON.parse(localStorage.getItem('collections')||"[]");
    //查找商品是否存在
    let index = collections.findIndex((v,i) => {
        if(v.goods_id === goods_id){
            return true;
        }
    });
    if(index !== -1){
        collections.splice(index,1);
        Toast.info('取消收藏',1);
        this.setState({
            isSave:false,
        });
    }else{
        Toast.info('收藏成功',1);
        collections.push(this.state.goodsDetail);
        this.setState({
            isSave:true,
        })
    }
    localStorage.setItem('collections',JSON.stringify(collections));
    }
    
    async componentDidMount() {
        let goods_id = this.props.match.params.goods_id;
        let res = await getItemDetail({ goods_id: goods_id });
        // console.log(res.message);
        this.setState({
            goodsDetail: res.message,
            swiperList: res.message.pics,
            str: res.message.goods_introduce
        })
        // document.getElementById('proIntroduce').innerHTML = this.state.str;
        //刚进来的时候 收藏逻辑的判断
        let collections = JSON.parse(localStorage.getItem('collections') || "[]");
        let index = collections.findIndex((v,i)=>{
            if(v.goods_id === this.state.goodsDetail.goods_id){
                return true;
            }
        });
        if(index !== -1){
            this.setState({
                isSave:true,
            })
        }

        if(this.state.swiperFlag === true){return;}
        if(this.state.swiperList.length !== 0){
            this.setState({
                swiperFlag:true
            })
        }

    }
    render() {
        return (
            <div>
                <Nav title="网易严选"></Nav>
                <div className={styles.centerWrap}>
                    <div className={styles.detailWrap}>
                        {/* 轮播图组件的开始 */}
                        <div>
                            <Carousel autoplay={this.state.swiperFlag} infinite dotStyle={{width:'10px',height:'4px'}} dotActiveStyle={{width:'10px',height:'4px'}}>
                                {this.state.swiperList.map((val) => (
                                    <img
                                        className={styles.imgIntroduce}
                                        // onClick={this.goToGoodDetail.bind(this, val.goods_id)}
                                        key={val.goods_id}
                                        src={val.pics_big}
                                        alt=""
                                        style={{ width: "100%", verticalAlign: "top" }}
                                        onLoad={() => {
                                            window.dispatchEvent(new Event("resize"));
                                            this.setState({ imgHeight: "auto" });
                                        }}
                                    />
                                ))}
                            </Carousel>
                        </div>
                        {/* 轮播图组件的结束 */}

                        <div className={styles.goodPrice}>￥{this.state.goodsDetail.goods_price}
                            <div className={styles.save}>
                                {/* <i className="iconfont icon-fenxiang"></i>
                                <i
                                    className={this.state.isSave?styles.active+" "+"iconfont icon-shoucang":"iconfont icon-shoucang"}
                                onClick={this.handleCollect.bind(this, this.state.goodsDetail.goods_id)}
                                ></i> */}
                                <i>99.1%</i>
                            </div>
                        </div>
                        <div className={styles.goodText}>{this.state.goodsDetail.goods_name}</div>
                        <div className={styles.saveMoney}>
                            <div className={styles.monthCar}>省钱月卡</div>
                            <div className={styles.share}>专享无门槛红包权益</div>
                            <div className={styles.moneyBtn}>立即省钱</div>
                        </div>

                        <ul className={styles.aaWrap}>
                            <li><div>邮费: 满99元免邮</div><div>&gt;</div></li>
                            <li><div>促销: <span className={styles.aa}>全场换购</span>低至3折超值换购</div><div>&gt;</div></li>
                            <li><div>购物返: 最高返<span className={styles.bb}>36积分</span></div><div>&gt;</div></li>
                        </ul>
                        <ul className={styles.aaWrap}>
                            <li><div>请选择规格数量</div><div>&gt;</div></li>
                            <li><div>限制：该商品不可使用优惠券</div></li>
                            <li><div>配送：请选择配送地址</div><div>&gt;</div></li>
                            <li><div>服务：</div>
                            <div className={styles.four}><span>网易自营品牌</span><span>30天无忧退货</span>
                            <span>不可用券</span><span>国内部分地区不可配送</span></div>
                            <div>&gt;</div></li>
                        </ul>

                    </div>
                    <div className={styles.detailText}>图文详情</div>
                    {/* 图文详情渲染的html代码 */}
                    <div dangerouslySetInnerHTML={{__html:this.state.goodsDetail.goods_introduce}}></div>
                </div>
                <div className={styles.proDetailFoot}>
                    <i className="iconfont icon-lianxikefu"></i>
                    <span className={styles.btn1}>立即购买</span>
                    <span className={styles.btn2}>加入购物车</span>
                </div>
            </div>
        )
    }
}
export default withRouter(GoodDetail)
